<template>
  <v-container>
    <AppAlert v-model="alertModel.IsShow" :delay="5000" :type="alertModel.Type"
      >{{ alertModel.Message }}
    </AppAlert>
    <v-row>
      <v-col v-for="picture in pictures" :key="picture.Id" md="4" cols="12">
        <PictureShow :value="picture" />
      </v-col>
    </v-row>
    <UploadBtn @save="onSavePicture"></UploadBtn>
  </v-container>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import UploadBtn from "@/components/UploadBtn.vue";
import PictureShow from "@/components/PictureShow.vue";
import AppAlert from "@/components/AppAlert.vue";

import { IPictureModel } from "@/Model/PictureModel";
import { AppAlertModel, IAppAlertModel } from "@/Model/AppAlertModel";

@Component({ components: { UploadBtn, PictureShow, AppAlert } })
export default class Album extends Vue {
  // region Prop
  // endregion

  // region Data
  private pictures: IPictureModel[] = [];
  private alertModel: IAppAlertModel = new AppAlertModel();
  // endregion

  // region computed
  // endregion

  // region watch
  // endregion

  // region method
  onSavePicture(pictureModel: IPictureModel) {
    const oldPicture = this.pictures;
    oldPicture.push(pictureModel);
    this.$axios
      .post("http://localhost:5000/api/picture/", pictureModel)
      .then(value => {
        this.showAlertSuccess("保存成功");
      })
      .catch(value => {
        this.showAlertError("保存失败，请检查服务端程序！");
      });
    this.pictures = oldPicture;
  }

  private showAlertError(message: string) {
    this.showAlert(message, "error");
  }

  private showAlertSuccess(message: string) {
    this.showAlert(message, "success");
  }

  private showAlert(message: string, type: string) {
    this.alertModel.Message = message;
    this.alertModel.Type = type;
    this.alertModel.IsShow = true;
  }
  // endregion

  // region hook
  created() {
    this.$axios.get("http://localhost:5000/api/picture/").then(value => {
      console.log(value.data);
      const ids: string[] = value.data["data"];
      this.showAlertSuccess(`读取图片库成功！总共获取：${ids.length}`)
      for (let i = 0; i < ids.length; i++) {
        this.$axios
          .get(`http://localhost:5000/api/picture/${ids[i]}/`)
          .then(value => {
            this.pictures.push(value.data["data"]);

          }).catch(value=>{
            this.showAlertError("读取图片信息失败！检查服务端程序")
        });
      }
    });
  }
  // endregion
}
</script>

<style lang="scss"></style>
